// 实现这个项目的构建任务自动化构建
const { src, dest, parallel, series, watch } = require("gulp");
const gulpLoadPlugins = require("gulp-load-plugins");
const browserSync = require("browser-sync");
const bs = browserSync.create();
const del = require("del");
const plugins = gulpLoadPlugins(); //引入plugins以后不需要挨个引入gulp下的插件
// 自动化构建 首先要将js css html打包
const data = {
  menus: [
    {
      name: "Home",
      icon: "aperture",
      link: "index.html",
    },
    {
      name: "Features",
      link: "features.html",
    },
    {
      name: "About",
      link: "about.html",
    },
    {
      name: "Contact",
      link: "#",
      children: [
        {
          name: "Twitter",
          link: "https://twitter.com/w_zce",
        },
        {
          name: "About",
          link: "https://weibo.com/zceme",
        },
        {
          name: "divider",
        },
        {
          name: "About",
          link: "https://github.com/zce",
        },
      ],
    },
  ],
  pkg: require("./package.json"),
  date: new Date(),
};
//一开始构建都是打包到dist，由于添加了useref，生成了许多临时性的文件，所以穿件一个temp的临时文件存放的目录
const style = () => {
  return src("src/assets/styles/*.scss", { base: "src" })
    .pipe(plugins.sass({ outputStyle: "expanded" }))
    .pipe(dest("temp"));
};
const js = () => {
  return src("src/assets/scripts/*.js", { base: "src" })
    .pipe(plugins.babel({ presets: ["@babel/preset-env"] }))
    .pipe(dest("temp"));
};

const page = () => {
  //编译模版文件
  return src("src/**/*.html", { base: "src" })
    .pipe(plugins.swig({ data }))
    .pipe(dest("temp"));
};

//图片文件转换
const image = () => {
  return src("src/assets/images/**", { base: "src" })
    .pipe(plugins.imagemin())
    .pipe(dest("dist"));
};
//   字体
const font = () => {
  return src("src/assets/fonts/**", { base: "src" })
    .pipe(plugins.fontmin())
    .pipe(dest("dist"));
};
const other = () => {
  return src("src/public/**", { base: "dist" }).pipe(dest("dist"));
};
const clean = () => {
  return del(["dist",'temp']);
};
const useref = () => {
  //将依赖文件打包
  return src("temp/*.html", { base: "dist" })
    .pipe(plugins.useref({ searchPath: ["dist", "."] }))
    .pipe(plugins.if(/\.js$/, plugins.uglify()))
    .pipe(plugins.if(/\.css$/, plugins.cleanCss()))
    .pipe(
      plugins.if(
        /\.html$/,
        plugins.htmlmin({
          collapseWhiteSpace: true,
          minifyCss: true,
          minifyJs: true,
        })
      )
    )
    .pipe(dest("dist"));
};
const serve = () => {
  watch("src/assets/styles/**", style);
  watch("src/assets/scripts/**", js);
  watch("src/*.html", page);
  watch(
    ["src/assets/images/**", "src/assets/fonts/**", "src/public/**"],
    bs.reload()
  ); //对测试服务器来说，不需要每次压缩图片字体文件，只需要监视变化，reload方法更新视图
  bs.init({
    notify: false,
    debugInfo: false,
    files: "dist/**",
    server: {
      baseDir: ["temp", "src"],
      routes: {
        "/node_modules": "node_modules",
      },
    },
  });
};
const compile = parallel(style, js, page);
const build = series(clean, parallel(series(compile,useref), image, font, other));
const dev = series(clean, compile, serve);

module.exports = { clean, build, dev };
